<template>
  <div class="hello">
    <van-nav-bar
      title="个人中心"
      right-text="编辑"
      @click-right="onClickRight"
      class="vant_bar"
    />
    <div class="page_top">
      <img :src="getInfo.avaUrl" alt="" />
      <p>{{ getInfo.name }}</p>
      <van-cell-group>
        <van-field label="手机号" :value="getInfo.phone" readonly />
        <van-field label="年龄" :value="getInfo.age" readonly />
      </van-cell-group>
      <van-grid class="van_gd" :gutter="10">
        <van-grid-item icon="photo-o" text="浏览历史" />
        <van-grid-item icon="photo-o" text="我的信息" />
        <van-grid-item icon="photo-o" text="我的关注" />
        <van-grid-item icon="photo-o" text="音乐偏好" />
        <van-grid-item icon="photo-o" text="我的歌单" />
        <van-grid-item icon="photo-o" text="好友列表" />
        <van-grid-item icon="photo-o" text="已购音乐" />
        <van-grid-item icon="photo-o" text="反馈与帮助" />
      </van-grid>
      <van-button round type="info" size="large" @click="logout()" class="vant_btn">
        登出
      </van-button>
    </div>
  </div>
</template>

<script>
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import url from "../tools/url";
export default {
  name: "My",
  data() {
    return {};
  },
  methods: {
    logout() {
      Indicator.open("加载中...");
      var token = sessionStorage.getItem("token");
      var str = `token=${token}`;
      this.axios.post(url.LOGIN_OUT, str).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          Indicator.close();
          Toast(res.data.data);
          sessionStorage.removeItem("token");
          this.$router.push("/Login");
        } else {
          Toast(res.data.data);
        }
      });
    },
    onClickRight() {
      this.$router.push("/Amend");
    },
  },
  mounted() {},
  computed: {
    getInfo() {
      return this.$store.state.info;
    },
  },
};
</script>

<style scope>
.page_top {
  margin-top: 10px;
}
.vant_bar {
  background-color: cornflowerblue;
}

.vant_btn {
  margin-top: 20px;
}
.van-nav-bar__text {
  color: aliceblue;
}
.hello {
  text-align: center;
}
.van_gd {
  margin-top: 20px;
  text-align: center;
}
.van-grid-item__content--center {
  border-radius: 15%;
}
.van-cell {
  margin-top: 10px;
}
</style>
